<template>
  <div class="getaddress">
    <newHeader/>
    <div class="w">
      <div class="panel">
        <div class="panel-title-box">
          <span class="panel-title">{{$t('router.howGetAddress')}}</span>
        </div>
        <div class="panel-content">
          <div class="panel-content-left">
            <h1 class="h1">
              <div class="panel-index">1</div>
              <span>{{$t('getaddress.t1')}}</span>
            </h1>
            <img class="img" src="../../assets/images/hrt/1.jpg" alt="">
            <h1 class="h1">
              <div class="panel-index">2</div>
              <span>{{$t('getaddress.t2')}}</span>
            </h1>
            <img class="img" src="../../assets/images/hrt/2.jpg" alt="">
            <h1 class="h1">
              <div class="panel-index">3</div>
              <span>{{$t('getaddress.t3')}}</span>
            </h1>
            <img class="img" src="../../assets/images/hrt/3.jpg" alt="">
          </div>
          <div class="panel-content-right">
            <h2 class="h2 item1">{{$t('getaddress.t4')}}</h2>
            <a href="https://www.coinsuper.com/"><h2 class="h2 item2">https://www.coinsuper.com/</h2></a>
            <h2 class="h2 item3">{{$t('getaddress.t5')}}</h2>
            <img class="img" src="../../assets/images/hrt/code.jpg" alt="">
          </div>
        </div>
      </div>
    </div>
    <newFooter/>
  </div>
</template>
<script>
import newHeader from '@/components/Header';
import newFooter from '@/components/Footer';

export default {
  name: 'index',
  components: {
    newHeader,
    newFooter,
  },
};
</script>
<style lang="scss" scoped>
.getaddress{
  .panel{
    background-color: #ffffff;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.05);
    border-radius: 5px;
    border: solid 1px #e0e0e0;
    margin-top: 50px;
    .panel-title-box{
      height: 50px;
      background-color: #f9f9f9;
      box-shadow: inset 0px -1px 0px 0 #f2f2f2;
      border-radius: 3px;
      padding: 0 20px;
      .panel-title{
        color: #333333;
        line-height: 50px;
        font-size: 14px;
      }
    }
    .panel-content{
      display: flex;
      padding: 63px 60px 120px 140px;
      .panel-content-left{
        width: 500px;
        margin-right: 140px;
        .h1{
          position: relative;
          line-height: 36px;
          padding: 15px 0;
          height: 66px;
          &:nth-of-type(2){
            margin-top: 156px;
          }
          &:nth-of-type(3){
            margin-top: 148px;
          }
          span{
            font-size: 24px;
            color: #70c1b3;
            vertical-align: text-top;
          }
          .panel-index{
            position: absolute;
            top: 23px;
            left: -58px;
            width: 20px;
            height: 20px;
            border-radius: 10px;
            background-color: #70c1b3;
            font-size: 12px;
            line-height: 20px;
            color: #fff;
            text-align: center;
          }
        }
        .img{
          margin-top: 26px;
        }
      }
      .panel-content-right{
        flex: 1;
        .h2{
          color: #70c1b3;
          font-size: 20px;
          line-height: 36px;
          &.item1{
            padding: 15px 0;
            height: 66px;
          }
          &.item2{
            margin-bottom: 46px;
          }
          &.item3{
            padding: 50px 0;
          }
        }
      }
    }
  }
}
</style>

